<template>
  <div class="flex item justify-between items-center">
    <div class="item-left">
      <slot name="item-left"></slot>
    </div>
    <div class="item-right flex items-center">
      <slot name="item-right"></slot>
      <slot name="item-img">
        <img src="@/assets/images/common/arrow-right.png" alt class="arrow-right" />
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "RecordItem",
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/common.scss";
.item {
  border-bottom: $item-border;
  padding: $item-paddding46;
  color: $text-color6;
  .arrow-right {
    width: $arrow-right-width;
    height: $arrow-right-height;
    margin-left: $margin-size26;
  }
}
</style>
